<template>
    <div id="shangpin" v-if="dellun.length">
        <van-tabs  scrollspy sticky>
            <div id="btnli" @click=shanggoo()><van-icon name="arrow-left" size="18"/></div>
            <van-tab v-for="(item,index) in hualist" :title="item.bianti" :key="index">
            <div v-if='index==0'>
                <div>
            <bannertail>
            <div class="swiper-slide" v-for="(item,index) in dellun" :key="index">
                <img :src="item" v-lazy="item"/>
            </div>
            </bannertail>
        </div>
        <div class="jianjie">
            <h4>
                {{product.name}}
            </h4>
            <p>
                {{product.desc}}
            </p>
            <div class="danjiaa">
                <span>¥ {{danjia | danjiafoo}}.00</span>
                <span class="baoyou">包邮</span>
            </div>
        </div>
        <zengpin :zengids="product.defaultSkuId"></zengpin>
        <div id="yh" v-if="yhlist !== null">
            <div class="youhui">优惠</div>
            <div class="yhj" v-for="(item,index) in yhlist" :key="index">
            ￥{{item.value | yhjfoo}}元 {{item.name}}
            </div>
            <van-cell class="lingjuan">领劵<van-icon name="arrow" size="22"  @click="yhishow=!yhishow"/></van-cell>
        </div>
        <van-popup v-model="yhishow" position="bottom" :style="{ height: '50%' }">
            <p>领优惠券<van-icon name="cross" size="20" class="lingx" @click="yhishow=!yhishow"/></p>
            <div v-for="(item,index) in yhlist" :key="index" class="youhuim">
                <div class="youhuizuo">￥{{item.value | yhjfoo}}</div>
                <div class="youhuiyou">
                    <div>
                        <p>{{item.name}}</p>
                        <p>{{item.validDate}}</p>
                        <button v-if="item.state">立即领取</button>
                    </div>
                </div>
            </div>
            <div class="wanchengs" @click="yhishow=true">完成</div>
        </van-popup>
        <div class="yixuan">
            <div class="yixuana">
                <div>已选</div>
                <div class="yansea">黑色</div>
                <div><van-icon name="arrow" size="20" color="#ccc" @click="yixuanshow=true"/></div>

            </div>
            <div class="yixuanb" v-if="product.guaranteeTags.length">
                <div v-for="(item,index) in product.guaranteeTags" :key="index">
                <van-icon name="checked" size="14"/> {{item}}
                </div>
            </div>
        </div>
            </div>
             <div v-else-if='index==1'>
                <pingjia :pingid="id"></pingjia>
             </div>
             <div v-else-if='index==2'>
                <lister :listershuju="lisys"></lister>
             </div>
              <div v-else-if='index==3'>
                 <listfooter></listfooter>
                 <div id="gouwuche">

        <van-goods-action>
            <van-goods-action-icon icon="shop-o" text="首页" color="red" to="/pages/home/index"/>
            <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
            <van-goods-action-icon icon="cart-o" text="购物车" />
            <van-goods-action-button type="warning" text="加入购物车" @click="yixuanshow=true"/>
            <van-goods-action-button type="danger" text="立即购买" @click="yixuanshow=true"/>

        </van-goods-action>
    </div>
             </div>
            </van-tab>
            </van-tabs>
            <selection v-show="yixuanshow" @selecshow="yixuanshow=false"></selection>
    </div>
</template>
<script>
import { mapActions, mapMutations, mapState } from 'vuex'
import Vue from 'vue'
import http from '@/util/http'
import bannertail from '@/views/List/bannertail'
import zengpin from '@/views/List/zengpin'
import pingjia from '@/views/List/pingjia'
import lister from '@/views/List/lister'
import selection from '@/views/List/Selection'
import { Icon, Lazyload, Popup, Cell, Tab, Tabs, GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'
import listfooter from '@/views/List/listfooter'
Vue.use(Icon).use(Lazyload).use(Popup).use(Cell).use(Tabs).use(Tab).use(GoodsActionIcon).use(GoodsActionButton).use(GoodsAction)
export default {
  data () {
    return {
      yixuanshow: false,
      yhlist: null,
      dellun: [], // 轮播图数据
      product: {}, // 大数据 // 商品单价
      id: this.$route.query.id,
      yhishow: false,
      yixlist: {},
      lisys: [],
      hualist: [
        {
          bianti: '商品'
        },
        {
          bianti: '评价'
        },
        {
          bianti: '详情'
        },
        {
          bianti: '推荐'
        }
      ]
    }
  },
  filters: {
    danjiafoo (path) {
      return path / 100
    },
    yhjfoo (pas) {
      return pas / 100
    }
  },
  components: {
    bannertail,
    zengpin,
    pingjia,
    lister,
    listfooter,
    selection
  },
  methods: {
    ...mapMutations(['hideAsides', 'showAsides']),
    ...mapActions(['getShopCarList']),
    yhsfoo () {

    },
    shanggoo () {
      this.$router.back()
    }
  },
  computed: {
    ...mapState(['danjia'])
  },
  mounted () {
    this.hideAsides()
    // console.log(this.product)
    http({
      url: `/heihei/api/product/product/product_detail?c=h5&s=20000&t=1605147402413&v=1.0&product_id=${this.$route.query.id}`
    }).then(res => {
      this.dellun = res.data.data.product.image
      this.product = res.data.data.product
      this.lisys = [this.product.pcDetailDesc, this.product.pcParamDesc]
    })
    this.getShopCarList(this.$route.query.id)
    // http({
    //   url: `/heihei/api/product/sku/sku_stock_detail?c=h5&s=20000&t=1605158824839&v=1.0&product_id=${this.$route.query.id}&stock_type=1`
    // }).then(res => {
    //   this.danjia = res.data.data.skuLinePriceRange[0]
    //   this.yixlist = res.data.data.skuMap
    // })
    http({
      url: `/heihei/api/activity/coupon_distribute/get_product_detail_coupons?c=h5&s=20000&t=1605161617184&v=1.0&product_id=${this.$route.query.id}`
    }).then(res => {
      this.yhlist = res.data.data.coupons
    })
  },
  destroyed () {
    this.showAsides()
  }
}
</script>
<style lang="scss" scoped>
    img{
        display: block;
    }
    #shangpin{
        position: relative;
        .van-tabs{
            #btnli{
                position: fixed;
                left: 0;
                top:11px;
                width: 25px;
                height: 25px;
                line-height: 30px;
                text-align: center;
                border-radius: 50%;
                z-index: 99;
            }
        }
         .yixuan{
             padding: 0 10px;
             height: 100px;
             border-top: 10px solid #ccc;
             .yixuana{
                 height: 50px;
                 line-height: 50px;
                 display: flex;
                 .yansea{
                     color: #3e3e3e;
                 }
                 div{
                      flex: 1;
                     color: #3e3e3e;
                     padding-left:5px ;
                     font-size: 14px;
                     position: relative;
                     .van-icon{
                         position: absolute;
                         top: 15px;
                         right: 10px;
                     }
                 }
             }
             .yixuanb{
                 border-top: 1px solid #ccc;
                 height: 40px;
                 line-height: 40px;
                 display: flex;
                 div{
                     padding-right:20px;
                     color: #ccc;
                     font-size: 14px;
                     .van-icon{
                         color:#ea413c;
                     }
                 }
             }
         }
         .van-popup{
            p{
                height: 45px;
                line-height: 45px;
                text-align: center;
                color: #262626;
                font-size: 18px;
                position: relative;
                .van-icon{
                    position: absolute;
                    right: 12px;
                    top:15px;
                }
            }
            .youhuim{
                height: 69px;
                display: flex;
                padding: 0 10px;
                margin-bottom: 10px;
                .youhuizuo{
                    padding-right: 10px;
                    width: 25%;
                    line-height: 69px;
                    background: #ea413c;
                    border-radius: 5px;
                    text-align: center;
                    color: white;
                    font-size: 20px;
                    font-weight: 500;
                }
                .youhuiyou{
                    border: 1px solid #ccc;
                    height: 69px;
                    flex: 1;
                     border-radius: 3px;
                     div{
                         position: relative;
                         padding-left: 20px;
                         p{
                             line-height: 40px;
                             height: 30px;
                             font-size: 14px;
                             text-align: left;
                         }
                         button{
                             position: absolute;
                             right: 5px;
                             top: 22px;
                             font-size: 14px;
                             color: white;
                             background-color: #ea413c;
                             border: 0;
                             padding: 5px;
                         }
                     }
                }
            }
            .wanchengs{
                position: absolute;
                line-height: 50px;
                text-align: center;
                left: 0;
                bottom: 0;
                right: 0;
                height: 50px;
                border-top: 1px solid #ccc;
            }
        }
        #yh{
        overflow: hidden;
        height: 50px;
        padding: 0 15px;
        position: relative;
        .youhui{
            line-height: 50px;
            color: #8c8c8c;
            font-size: 14px;
            width: 50%;
        }
        .lingjuan{
            line-height: 49px;
            color: #ccc;
            font-size: 14px;
            position: absolute;
            right: 0px;
            top: 0px;
            width: 20%;
            padding: 0 ;
            .van-icon{
               position: absolute;
               top:14px;
               color:#ccc;
            }
        }
        .yhj{
            position: absolute;
            height: 20px;
            left: 60px;
            top:16px;
            line-height: 20px;
            font-size: 13px;
            color: #ea413c;
            background: #ffd9d6;
            border-radius:2px;
            padding: 0 4px;
        }
    }
        .jianjie{
            width: 100%;
            padding: 15px 15px;
            background: #fff;
            h4{
                line-height: 1.6;
                font-size: 18px;
                color: #262626;
                font-weight: 100;
            }
            p{
                line-height: 1.36;
                color: #8c8c8c;
                font-size: 14px;
            }
            .danjiaa{
                height: 37px;
                width: 100%;
                margin-top: 12px;
                line-height: 25px;
                span{
                    color: #ea413c;
                    font-size: 22px;
                }
                .baoyou{
                    display: inline-block;
                    width: 32px;
                    height: 16px;
                    font-size: 12px;
                    background: #ffe6de;
                    color: #ea413c;
                    line-height: 16px;
                    text-align: center;
                    margin-left: 19px;
                }
            }
            }
    }
     #gouwuche{
        z-index: 1000;
    }
</style>
